<template>
  <a-drawer
    :visible="formVisible"
    :width="500"
    unmount-on-close
    :title="isEdit ? '编辑' : '新增'"
    @ok="submit"
    @cancel="handleCancel"
  >
    <div>
      <a-form
        ref="formRef"
        :model="form"
        :label-col-props="{ span: 8 }"
        :wrapper-col-props="{ span: 16 }"
      >
        <a-form-item field="version" label="版本号">
          <a-input
            v-model="form.version"
            placeholder="请输入版本号"
            :rules="[{ required: true, message: '请输入版本号' }]"
          />
        </a-form-item>

        <a-form-item field="version" label="版本号">
          <a-upload
            action="/admin/cat_circuit_version/add"
            :headers="token"
            :auto-upload="false"
            ref="uploadRef"
            @success="onSuccess"
            multiple
            #upload-button
            :data="filesData"
            name="blueprint"
          >
          </a-upload>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { ref, watch, computed, defineProps } from 'vue';
  import { FieldRule, Message } from '@arco-design/web-vue';
  import { addPartInfo } from '@/api/part';
  import {
    addProductionInfo,
    contentTypeOptionsCatCircuitVersion,
    contentTypeOptionsCatPlateVersion,
  } from '@/api/production';
  import { getToken } from '@/utils/auth';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    selected: {
      type: Number,
      default: 3,
    },
    refreshList: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  const formRef = ref(); //声明才能绑定，  ref="formRef"相当于一个标识可以调用或者检验form的内容

  // 初始数据
  const initData = () => {
    return {
      name: 'eeeeeeee',
    };
  };
  /**
   * 菜单数据
   */
  const form = ref(props.formData);
  console.log(form);
  const selected = ref(props.selected);
  console.log(selected);

  const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void;
    (e: 'refresh'): void;
  }>();
  const formVisible = ref(false);

  // 判断是编辑还是新增
  console.log(form.value.id);
  const isEdit = computed(() => !!form.value.id);
  console.log(isEdit);

  //分类钣金版本表id
  let contentTypeOptionsData = [];
  const fieldNames = { value: 'id', label: 'version_name' };
  const contentTypeOptions = async () => {
    const { data } = await contentTypeOptionsCatPlateVersion(selected);
    contentTypeOptionsData = data.data;

    console.log(contentTypeOptionsData);
  };
  contentTypeOptions();

  //分类电器版本表id
  let contentTypeOptionsDataCircuitVersion = [];
  const fieldNamesCircuitVersion = { value: 'id', label: 'version_name' };
  const contentTypeOptionsCircuit = async () => {
    const { data } = await contentTypeOptionsCatCircuitVersion();
    contentTypeOptionsDataCircuitVersion = data.data;

    console.log(contentTypeOptionsDataCircuitVersion);
  };
  contentTypeOptionsCircuit();

  const contentTypeOptions1 = [
    {
      label: 'img',
      value: 'img',
    },
    {
      label: 'horizontalVideo',
      value: 'horizontalVideo',
    },
    {
      label: 'img',
      value: 'verticalVideo',
    },
  ];

  //上传文件
  let filesData = {};
  const uploadRef = ref();
  const files = ref([]);
  const isload = ref(false);
  const token = {
    token: getToken(),
  };
  const onSuccess = (fileList) => {
    Message.success('添加分类电器版本成功');
    files.value = fileList;
  };
  const onError = (fileList) => {
    Message.error('添加分类电器版本失败');
  };
  console.log(token);

  const submit = async () => {
    isload.value = true;
    formVisible.value = true;
    const validate = await formRef.value.validate();
    console.log(formRef.value);
    console.log(validate);

    if (!validate) {
      console.log(isEdit.value);
      if (isEdit.value) {
        console.log(form.value);
        console.log('修改成功 写修改api');
      } else {
        console.log(form.value);
        console.log(selected);
        const data = {
          cat_second_id: selected.value,
          version: form.value.version,
        };
        console.log(data);
        filesData = data;
        console.log(filesData);
        uploadRef.value.submit();
        console.log(uploadRef.value.submit());
        console.log(uploadRef.value);

        // await addProductionInfo(data).then(()=>{
        //     Message.success("添加成功");
        // });
        console.log('添加成功');
      }
      console.log(initData);
      form.value = { ...initData };
      console.log(form.value);
      formVisible.value = false;
      emit('refresh');
    }
  };

  const handleCancel = () => {
    formVisible.value = false;
    form.value = { ...initData };
  };

  watch(
    () => formVisible.value,
    (val) => {
      emit('update:visible', val);
    }
  );

  watch(
    () => props.visible,
    (val) => {
      formVisible.value = val;
    }
  );

  watch(
    () => props.formData,
    (val) => {
      form.value = val;
    }
  );
  watch(
    () => props.selected,
    (val) => {
      selected.value = val;
    }
  );
</script>
